import { Breadcrumb, Layout } from 'antd'
import React, { useState } from 'react'
import { Outlet } from 'react-router-dom'
import MainMenu from '../components/Menu'
import ChangeTheme from '../components/Theme'
const { Header, Content, Footer, Sider } = Layout

const Home: React.FC = () => {
  const [collapsed, setCollapsed] = useState(false)

  return (
    <Layout style={{ minHeight: '100vh' }}>
      {/* 侧边栏 */}
      <Sider
        collapsible
        collapsed={collapsed}
        onCollapse={(value) => setCollapsed(value)}
      >
        <div className="logo" />
        <MainMenu />
      </Sider>
      {/* 主题内容 */}
      <Layout className="site-layout">
        {/* 头部 */}
        <Header
          className="site-layout-background"
          style={{ paddingLeft: '16px',display:'flex' }}
        >
          <Breadcrumb style={{ lineHeight: '64px' }}>
            <Breadcrumb.Item>User</Breadcrumb.Item>
            <Breadcrumb.Item>Bill</Breadcrumb.Item>
          </Breadcrumb>
          <ChangeTheme></ChangeTheme>
        </Header>
        {/* 显示的内容 */}
        <Content
          style={{ margin: '16px 16px 0' }}
          className="site-layout-background"
        >
          {/* 展示对应的路由页面 */}
          <Outlet />
        </Content>
        {/* 尾部 */}
        <Footer
          style={{
            textAlign: 'center',
            padding: 0,
            height: '48px',
            lineHeight: '48px',
          }}
        >
          Ant Design ©2018 Created by Ant UED
        </Footer>
      </Layout>
    </Layout>
  )
}

export default Home
